import { defineStore } from 'pinia'
import { ref } from 'vue'
import Taro from '@tarojs/taro'

export type ThemeType = 'blue' | 'green' | 'purple' | 'orange' | 'rose'

export interface ThemeConfig {
  name: string
  value: ThemeType
  primary: string
  description: string
}

export const themeConfigs: ThemeConfig[] = [
  {
    name: '默认蓝色',
    value: 'blue',
    primary: '#3b82f6',
    description: '清新的蓝色主题，适合大多数场景'
  },
  {
    name: '自然绿色',
    value: 'green',
    primary: '#22c55e',
    description: '清新的绿色主题，充满生机活力'
  },
  {
    name: '神秘紫色',
    value: 'purple',
    primary: '#a855f7',
    description: '神秘的紫色主题，彰显个性魅力'
  },
  {
    name: '活力橙色',
    value: 'orange',
    primary: '#f97316',
    description: '温暖的橙色主题，充满活力热情'
  },
  {
    name: '浪漫玫瑰',
    value: 'rose',
    primary: '#f43f5e',
    description: '浪漫的玫瑰色主题，温柔而优雅'
  }
]

export const useThemeStore = defineStore('theme', () => {
  const currentTheme = ref<ThemeType>('blue')

  // 初始化主题
  const initTheme = () => {
    try {
      // 从本地存储获取主题
      const savedTheme = Taro.getStorageSync('app_theme') as ThemeType
      if (savedTheme && themeConfigs.find(theme => theme.value === savedTheme)) {
        currentTheme.value = savedTheme
        applyTheme(savedTheme)
      } else {
        // 使用默认主题
        applyTheme('blue')
      }
    } catch (error) {
      console.error('初始化主题失败:', error)
      currentTheme.value = 'blue'
    }
  }

  // 应用主题
  const applyTheme = (theme: ThemeType) => {
    try {
      // 更新HTML类名（仅在H5中有效）
      if (typeof document !== 'undefined') {
        const classList = ['theme-blue', 'theme-green', 'theme-purple', 'theme-orange', 'theme-rose']
        classList.forEach(cls => {
          document.documentElement.classList.remove(cls)
        })
        
        if (theme !== 'blue') {
          document.documentElement.classList.add(`theme-${theme}`)
        }
      }

      // 更新导航栏和TabBar颜色
      const themeConfig = themeConfigs.find(t => t.value === theme)
      if (themeConfig) {
        // 设置导航栏颜色
        Taro.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: themeConfig.primary,
        }).catch(error => {
          console.log('设置导航栏颜色失败:', error)
        })

        // 设置TabBar颜色
        Taro.setTabBarStyle({
          selectedColor: themeConfig.primary,
          backgroundColor: '#ffffff',
          borderStyle: 'black',
          color: '#666666'
        }).catch(error => {
          console.log('设置TabBar颜色失败:', error)
        })
      }
    } catch (error) {
      console.error('应用主题失败:', error)
    }
  }

  // 设置主题
  const setTheme = (theme: ThemeType) => {
    try {
      currentTheme.value = theme
      applyTheme(theme)
      
      // 保存到本地存储
      Taro.setStorageSync('app_theme', theme)
      console.log(`主题已切换到: ${theme}`)
    } catch (error) {
      console.error('设置主题失败:', error)
      throw error
    }
  }

  // 获取当前主题配置
  const getCurrentThemeConfig = () => {
    return themeConfigs.find(theme => theme.value === currentTheme.value) || themeConfigs[0]
  }

  // 保存主题设置
  const saveTheme = () => {
    try {
      Taro.setStorageSync('app_theme', currentTheme.value)
      console.log('主题设置已保存:', currentTheme.value)
    } catch (error) {
      console.error('保存主题失败:', error)
      throw error
    }
  }

  return {
    currentTheme,
    themeConfigs,
    initTheme,
    setTheme,
    getCurrentThemeConfig,
    applyTheme,
    saveTheme
  }
}) 